<template>
  <view class="sku" v-if="haveSku" @click="openPop">
    <v-tag tag="规格" />
    <view class="value">
      <view class="sku-list">
        <view class="item" v-for="(item, index) in skuList" :key="index">
          {{ item }}
        </view>
      </view>
      <view class="select">
        <u-icon name="arrow-right" color="#333" size="24rpx"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import Tag from './Tag'
export default {
  props: ['skuList', 'haveSku'],
  components: {
    'v-tag': Tag
  },
  data() {
    return {
    }
  },
  methods: {
    openPop() {
      this.$emit('openPop')
    }
  }
}
</script>

<style scoped lang="scss">
.sku {
  font-size: 24rpx;
  margin: 20rpx 0;
  padding: 20rpx;
  background: white;
  border-radius: 10rpx;
  .value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .select {
      width: 24rpx;
    }
    .sku-list {
      flex: 1;
      //background: red;
      .item {
        display: inline-block;
        margin-right: 10px;
        background: $main_color;
        color: white;
        padding: 2px 4px;
        //font-size: 20rpx;
        font-size: 24rpx;
        border-radius: 5rpx;
      }
    }
  }
}
</style>
